<template>
	<view class="member-body w100 bg_white pB100ux">
		  <view class="uni-flex uni-column">
		    <view class="flex-item flex-item-V" style="border-bottom:#d6e6f3; solid 1px;">
				<view class="an-card an-userInfo bg_boxcolor1 uni-flex uni-row" style="background-color:  #d6e6f3;;">
					<icon class="iconfont  icon-dianying1" size="26"/>
					<view class="an-user-image flex-item">
						<image mode="aspectFit" :src="uinfo.headimgurl" @error="imageError"></image></view>
					<view class="an-user-text flex-item m10">
						<view>
							<h3>{{uinfo.name}}</h3>
							<view class="showcompany">
								<p v-if="showtype=='2'">{{uinfo.company_name}}</p>
								<p v-html="usermember.member_orderremark"></p>
								<p class="an-user-role">{{membertips}}</p>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		    <!-- <view class="flex-item flex-item-V bg_white an-radius-body">
	            <view class="uni-flex uni-row w100 b_border">
	                <view v-for="(item,index) in itembuy" class="flex-item buy-item w100"  :key="index" @click="curbuyitem(index)">
						<text :class="itembuyindex === index?'but-item-bottom col_blue pB5':''">{{item.title}}</text>
					</view>
	            </view>
				<view  v-for="(item,index) in itembuy" v-if="itembuyindex===index">
				<view class="buy-item-tips col_999 w90 mT10">
					<view class="w100">套餐名称:<span v-html="item.remark"></span></view>
					<view class="w100">限制人数:{{item.outAppnumber}}</view>
					<view class="w100">价钱: <span class="f16 pL5 pR5 col_red inline-block">{{item.money}}</span>元/
					月</view>
				</view>
			</view>
			</view> -->
			<view class="listhoswall mT10 p10">
				<view class="listhosw bg_white an-radius-body">
					<view class="list1 tCenter" v-for="(item,index) in itembuy" @click="curbuyitem(index)" :class="itembuyindex==index?'on':''">
						<view class="w100 tLeft">{{item.title}}</view>
						<view class="w100 col_red"><span class='f12 '>￥</span>{{item.money}}</view>
						<!-- <view class="w100 tLeft" >套餐说明:<span class="inline-block" v-html="item.remark"></span></view> -->
						<view class="w100 pT5">
							<view class="w90 mauto picefor col_white">
								{{item.frequency}}分
							</view>
							
						</view>
					</view>
					
				</view>
			</view>
			
			<view class="mT10 pL10 pR10 pB10">
				<view class="title bold f16 pB5">
					支付方式
				</view>
				<view class="wapweixin">
					<image src="../../static/img/weixin.png" class="w100"  style="width: 43px;height: 42px;" ></image>
					<span>微信支付</span>
				</view>
			</view>			
			
			<view style="width: 100%;height: 10px;background: #f7f7f7;"></view>
			<view class="mT10 pL10 pR10 pB10 explainall">
				<view class="title bold f14 pB5 tCenter">
					———— 套餐说明 ————
				</view>
				<view class="explaindiv w90 mauto">
					<view v-html="showexplain">
						
					</view>
				</view>
			</view>
			
			<view class="go-pay pT10" v-if="showtext != '免费版'">				
				<view class="uni-bg-green w90" @click="pay()">
				<text class="m10">去支付{{paytext}}</text>
				<br>
				<!-- <text>------tips----</text> -->
				</view>
				</view>
		    <!-- <view class="flex-item flex-item-V uni-bg-blue">
				
			<text>优惠券></text>
		
			</view> -->
		  <!--  <input type="number"> -->
			<!-- <view style="width: 100%;height: 10px;background: #d6e6f3;"></view> -->
			
			<!-- more view code -->
			
			
			</view>
			
		<backnext></backnext>
		<!-- 底部导航 -->
		<footernav pagePath='user'></footernav>
		<!-- 加载动画 -->
		<loading v-if="!isloading()"></loading>
	</view>
</template>

<script>
	// import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
	import {userinfo,commoditygetlist,commoditychcommodity} from '@/common/api/user.js'; //引进requst方法
	import {wechatpay,wechatnotify} from '@/common/api/pool.js'
	import {GetDateDiff} from '@/common/common.js' //工具类
	// #ifdef H5 
	import  jweixin from '@/components/jweixin-module/index.js'
		// #endif
	export default {
		// components: {uniNumberBox},
		data() {
			return {
				/*选项卡*/
				itembuy:[
					{title:"套餐一",frequency:'100'},
					{title:"套餐二",frequency:'100'},
					{title:"套餐三",frequency:'100'}
				],
				itembuyindex:0,
				paytext:'',
				showexplain:'',
				showtext:'',
				usermember:"",
				uinfo:[],
				memberinfo:[],
				membertips:'',
				showtype:'1',
			};
		},
		onLoad(event) {
			// 个人充值:1,公司充值:2
			this.showtype=event.type;
			console.log(1)
			userinfo({}).then(res=>{
				console.log(1)
				if(res.data.code == 200){
					this.uinfo = res.data.data
					this.usermember=res.data.member;
					this.memberinfo = res.data.member
					this.membercheck();
					if(this.showtype=='2'){
						// alert(this.uinfo.roleid)
						if(this.uinfo.roleid!='2'){
							uni.redirectTo({
							    url: '../user/user'
							});
						}
					}
				}
				console.log(res)
			})
			
			commoditygetlist({type:this.showtype}).then(res=>{
				console.log(res)
				this.itembuy=res.data.data;
				this.curbuyitem(0)
			})
		},
		methods:{
			/*member expritime check*/
			membercheck(){
				console.log(this.memberinfo)
				if(this.memberinfo.member_expritime!=null){
					var date = new Date(this.memberinfo.member_expritime);
					var time1 = date.getTime();
					// console.log(time1)
					var nowday = Date.parse(new Date())
					// console.log(nowday)
					// console.log(nowday>time1)
					if(nowday>time1){
						this.membertips=  '套餐已逾期'+GetDateDiff(time1,nowday)+'天';
					}else{
						this.membertips = '积分:'+this.memberinfo.member_frequency;
					}
				}			
			},
			pay(){
				let reres = {}
				var that=this;
				let commodityinfo = this.itembuy[this.itembuyindex]
				wechatpay({
					'commodityid':commodityinfo.id,
					'amount':1,
					 'type':this.showtype,
					'price':commodityinfo.money
				}).then(res=>{
					console.log(res)
					reres = res
					// #ifdef H5 
					let buildConfig = JSON.parse(res.data.buildConfig)
					let WeixinJSBridge = JSON.parse(res.data.WeixinJSBridge)
									
									jweixin.config({
										debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
										appId:reres.data.parameters.appId, // 必填，公众号的唯一标识
										timestamp:reres.data.parameters.timeStamp, // 必填，生成签名的时间戳
										nonceStr:reres.data.parameters.nonceStr, // 必填，生成签名的随机串
										signature:buildConfig.signature, // 必填，签名，见附录1
										jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
									});
									jweixin.ready(function() {
										jweixin.checkJsApi({
											jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
											success: function(res) {
												console.log('checkjsapi Success')
												console.log(res);
											},
											fail:function(res) {
												console.log('res')
												console.log(res);
											}
										});
									    jweixin.chooseWXPay({
									        timestamp: reres.data.parameters.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
									        nonceStr: reres.data.parameters.nonceStr, // 支付签名随机串，不长于 32 位
									        package: reres.data.parameters.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
											signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
									        paySign:reres.data.parameters.paySign, // 支付签名
									        success:function(sres) {
									            // 支付成功后的回调函数
												// commoditychcommodity({
												// 	'out_trade_no':reres.data.parameters.out_trade_no
												// }).then(res=>{
												// 	if(res.data.code == 200){
												// 		uni.showToast({
												// 		    title: '支付成功',
												// 		    duration: 2000,
												// 			icon:'none'
												// 		});
												// 	}
												// })
												uni.showToast({
												    title: '支付成功',
												    duration: 2000,
																								   icon:'none'
												});
												// that.backRefresh('12')
												setTimeout(()=>{
													window.location.replace('/wap/#/pages/user/user')
												},2000)
									        },
											cancel: function(r) {
												uni.showToast({
												    title: '您取消了支付',
												    duration: 2000,
													icon:'none'
												});

											   // var route =  'payResult' + '?type=2'
											   // uni.navigateTo({
											   //   url:route
											   // });
											},
									        fail:function(res) {
									           uni.showToast({
									               title: '支付失败',
									               duration: 2000,
												   icon:'none'
									           });
												console.log('payfail')
												console.log(res)
												// var route =  'payResult' + '?type=0' 
												// uni.navigateTo({
												//   url:route
												// });
												
												
									        }
									    });
									});
									 
									jweixin.error(function(res) {
										console.log('error')
										console.log(res)
										uni.showToast({
											icon: 'none',
											title: '支付失败了',
											duration: 4000
										});
									        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
									        /*alert("config信息验证失败");*/
									});
									// #endif

				})
				
				
			},
			curbuyitem(index){
				this.itembuyindex = index;
				this.showtext = this.itembuy[index].title;
				this.paytext = '￥'+this.itembuy[index].money;
				if(this.itembuy[index].remark){
					this.showexplain=this.itembuy[index].remark;
				}else{
					this.showexplain='无';
				}
			setInterval(function(){
				
			})
			},
		}
	}
</script>

<style lang="scss">
.member-body{
	// background:#d6e6f3;
}
.an-radius-body{
	position: unset;
	top: unset;
	left: unset;
	right: unset;
	z-index: unset;
	width: unset;
	padding: unset;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	}
.an-card{
	    border-radius: 10px;
	    margin: 10px;
		position: relative;
		overflow: hidden;
		.icon-dianying1{
			opacity: 0.3;
			position:absolute;
			color: #F1F1F1;
			left: 60%;
			font-size: 10rem;
		}
}
.buy-item{
	text-align: center;
	padding: 12px;
	font-weight:bold;
}
.buy-item-tips{
	margin: 0 auto;
	text{
		margin: 10px;
		display:block;}
}
.but-item-bottom{
	// border-bottom: 2px solid #333;
	border-bottom: 2px solid #409EFF;
	
}
.an-user-image{
		margin: 10px 0 10px 20px;
		width: 60px;
	    height: 60px;
	    background: black;
	    border-radius: 10px;
		overflow: hidden;
		image{
			width: 60px;
			height: 60px;
		}
	}
.buy-item-details{
	
}
.buy-item-pay{
	margin: 0 auto;
	text{
		&:first-child{
			display: block;
		}
	}
	view{
		text-align: center;
		padding: 6px;
		border-radius: 8px;
		letter-spacing: 2px;}
	.pay-wechat{
		border: 1px solid #999999;
		.icon-weixin1{
			border-radius: 10px;
			width: 35px;
			font-size: 16px;
		}
	}
}
.go-pay{
	    // position: absolute;
	    bottom: 50px;
	    text-align: center;
		width: 100%;
		view{
			margin: 0 auto;
			border-radius: 10px;
			line-height: 80rpx;
		}
}	
.listhoswall .listhosw{white-space: nowrap;overflow-x: auto;}
.listhoswall .listhosw .list1{width: 5.5rem;padding:0.5rem 0.3rem;min-height: 5rem; margin: 0px 0.5rem;border: 1px solid #808080;border-radius: 8px; display: inline-block;vertical-align: top;overflow: hidden;}
.picefor{background:#67C23A;}
.listhoswall .listhosw .list1:first-child{margin-left: 0;}
.listhoswall .listhosw .list1.on{border: 1px solid #67C23A;background-color: #d6e6f3;}
.wapweixin{padding:0px 10px; display: inline-block;border: 1px solid #67C23A;background-color:#d6e6f3;border-radius: 5px;
}
.wapweixin image{width: 70rpx;vertical-align: middle;padding-right: 10px;}
.explainall .title{color: #67C23A;}
.explainall .explaindiv{padding: 10px;border-radius:8px;overflow:hidden;background-color: rgba($color: #67C23A, $alpha: 0.5); }
</style>
